<template>
    <div v-if="disableFlag" class="main">
        <div class="box">
            <div class="top">
                <p class="type">
                    教材版本
                </p>
                <p class="editionBox">
                    <span v-for="item in versionList" :key='item.schoolBookVersionId' @click="chooseVersion(item)" :class="{'active': versionActive == item.schoolBookVersionId}">
                        {{item.schoolBookVersionName}}
                    </span>
                </p>
                <p class="type">
                    课本
                </p>
                <p class="editionBox">
                    <span v-for="item in bookList" :key="item.schoolBookId" @click="chooseBook(item)" :class="{'active': bookActive == item.schoolBookId}">
                        {{item.schoolBookName}}
                    </span>
                </p>
            </div>
            <div class="footer">
                <div @click="handleClose">
                    取消
                </div>
                <div @click="confirm">
                    确定
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        disableFlag: {
            type: Boolean,
            default: false
        },
        stageId: {
            type: String,
            default: ''
        },
        gradeId: {
            type: String,
            default: ''
        },
        subjectId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            versionActive: '',
            versionItem: '',
            bookActive: '',
            bookItem: '',
            versionList: [],
            bookList: []
        }
    },
    mounted () {
        if (this.selectObj) {
            this.getVersion().then(
                () => {
                    this.getbook(this.versionActive, true)
                }
            )
        }
    },
    computed: {
        selectObj () {
			return this.$store.state.study.selectObj
		}
    },
    methods:{
        handleClose () {
            this.$emit('handleClose')
        },
        confirm () {
            if (!this.bookItem) {
                this.$vux.toast.text('请选择课本', 'top')
                return
            }
            var obj = {
                versionId: this.versionActive,
                versionName: this.versionItem.schoolBookVersionName,
                bookId: this.bookActive,
                bookName: this.bookItem.schoolBookName
            }
            this.$store.commit('study/setSelectObj', obj)
            this.$emit('confirm')
        },
        chooseVersion (item) {
            this.bookList = []
            this.versionActive = item.schoolBookVersionId
            this.versionItem = item
            this.getbook(item.schoolBookVersionId, false)
        },
        chooseBook (item) {
            this.bookActive = item.schoolBookId
            this.bookItem = item
        },
        getVersion () {
            var params = {
                StageId: this.stageId,
                SubjectId: this.subjectId,
            }
            return new Promise ((resolve, reject) => {
                this.$store.dispatch('study/GetVersion', params).then(
                    res => {
                        if (res.length > 0) {
                            this.versionList = res
                            this.versionActive =  this.selectObj.versionId
                            this.versionItem = {schoolBookVersionName: this.selectObj.versionName}
                            resolve()
                        }
                    }
                )
            })
        },
        getbook (versionId, flag) {
            var params = {
                bookVersionId: versionId,
                gradeId: this.gradeId,
                SubjectId: this.subjectId
            }
            this.$store.dispatch('study/GetBook', params).then(
                res => {
                    if (res.length > 0) {
                        this.bookList = res
                        if (flag) {
                            this.bookActive =  this.selectObj.bookId
                            this.bookItem = {schoolBookName: this.selectObj.bookName}
                        } else {
                            this.bookActive = res[0].schoolBookId
                            this.bookItem = res[0]
                        }
                    }
                }
            )
        }
    }
}
</script>
<style lang='less' scoped>
    .main{
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.5);
        z-index: 120;

    }
    .box{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 6.84rem;
        transform: translate(-50%,-50%);
        background: #fff;
        padding-top: 0.4rem;
        border-radius: 0.15rem;
        .top{
            padding: 0 0.34rem;
            .type{
                margin-bottom: 0.3rem;
                font-size: 0.28rem;
            }
            >.editionBox{
                max-height: 2.62rem;
                overflow: auto;
                >span{
                    color: #666666;
                    display: inline-block;
                    padding: 0.16rem 0.26rem;
                    background: #F8F8F8;
                    border-radius: 8px;
                    margin: 0 0.24rem 0.24rem  0;
                }
                .active{
                    color: #128FEF;
                    background: #E8F5FF;
                }
            }
        }
        .footer{
            width: 100%;
            height: 0.88rem;
            line-height: 0.88rem;
            border-top: 0.01rem solid #E5E5E5;
            >div{
                display: inline-block;
                width: 49%;
                box-sizing: border-box;
                text-align: center;
                font-size: 0.28rem;
                color: #666;
            }
            >div:first-child{
                border-right: 0.01rem solid #E5E5E5;
            }
            >div:last-child{
                color: #0A8DE5;
            }
        }
    }

</style>